<template>
    <div>
        <Row :gutter="16" type="flex" justify="end">
            <Col :xs="2" :lg="2">
                <a :href='exportExcel'><Button icon="md-download">导出订单</Button></a>
            </Col>
            <Col :xs="6" :lg="4">
                <Input icon="search" clearable placeholder="订单编号/手机号" v-model="searchForm.keyword"></Input>
            </Col>
            <Col :xs="6" :lg="5">
                <DatePicker :value="searchForm.pay_at" @on-change="handleDateChange" format="yyyy-MM-dd HH:mm:ss"
                            type="datetimerange" placement="bottom-end" placeholder="选择支付时间"
                            style="width: 100%;"></DatePicker>
            </Col>
            <Col :xs="3" :lg="4">
                <Select v-model="searchForm.type" placeholder="选择订单类型">
                    <Option value="" key="">全部</Option>
                    <Option v-for="itm in tableStatus.types" :value="itm.id">{{ itm.label }}</Option>
                </Select>
            </Col>
            <Col :xs="3" :lg="4">
                <Select v-model="searchForm.status" placeholder="选择订单状态">
                    <Option value="" key="">全部</Option>
                    <Option v-for="item in tableStatus.orderStatus" :value="item.id">{{ item.label }}</Option>
                </Select>
            </Col>
            <Col :xs="2" :lg="2">
                <Button type="primary" icon="ios-search" @click="getOrderTable(feeds.current_page)">搜索</Button>
            </Col>
            <Col :xs="2" :lg="2">
                <Button icon="md-refresh" @click="reset">重置</Button>
            </Col>
        </Row>
        <br>

        <Row>
            <div class="demo-spin-container" v-if="tableLoading">
                <Spin fix>
                    <Icon type="load-c" size=18 class="spin-icon-load"></Icon>
                    <div>加载中...</div>
                </Spin>
            </div>
            <Table border :columns="columns" :data="feeds.data"></Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="feeds.total" :current="feeds.current_page" :page-size="feeds.per_page" class="paging"
                          show-elevator show-total show-sizer @on-change="handleOnPageChange"
                          @on-page-size-change='onPageSizeChange'></Page>
                </div>
            </div>
        </Row>

    </div>
</template>


<script>
  import {destroy, getTableData} from '@/api/order'

  export default {
    data() {
      return {
        searchForm: {
          order_by: 'id,desc',
          pay_at: [],
          type: '',
          status: ''
        },
        tableLoading: false,
        tableStatus: {
          types: [
            {id: 1, label: '诊断订单'},
            {id: 2, label: '鉴定订单'}
          ],
          orderStatus: [
            {id: 1, label: '未支付'},
            {id: 2, label: '预约订单'},
            {id: 3, label: '完成交易'}
          ]
        },
        feeds: {
          data: [],
          total: 0,
          current_page: 1,
          per_page: 10
        },
        columns: [
          {title: '订单号', key: 'no', minWidth: 180,},
          {
            title: '车辆信息', minWidth: 180,
            render: (h, params) => {
              return h('div',
                params.row.items.series
              )
            }
          },
          {
            title: '售价/万', minWidth: 90,
            render: (h, params) => {
              return h('div',
                params.row.items.new_price
              )
            }
          },
          {
            title: '手机号', minWidth: 120,
            render: (h, params) => {
              return h('div',
                params.row.user.phone
              )
            }
          },
          {
            title: '订单类型', minWidth: 110,
            render: (h, params) => {
              const e = params.row.type
              const text = e === 1 ? '诊断订单' : '鉴定订单'
              const color = e === 1 ? 'primary' : 'success'
              return h('Tag', {
                props: {color: color}
              }, text)
            }
          },
          {title: '鉴定金额', key: 'total_amount', align: 'right', minWidth: 100,},
          {title: '抵扣金额', key: 'coupon_amount', align: 'right', minWidth: 100,},
          {title: '实际支付', key: 'pay_amount', align: 'right', minWidth: 100,},
          {title: '支付时间', key: 'paid_at', minWidth: 150,},
          {
            title: '状态',
            key: 'status',
            minWidth: 120,
            render: (h, params) => {
              const d = params.row.paid_at
              const e = params.row.bespeak
              const text = d === null ? (e === 1 ? '预约交易' : '未支付') : '完成交易'
              const color = d === null ? (e === 1 ? 'warning' : 'default') : 'success'

              return h('Tag', {
                props: {color: color}
              }, text)
            }
          }
        ],
      }
    },
    computed: {
      exportExcel() {
        return window.exportExcelUrl.exportOrderLists + '?search_data=' + JSON.stringify(this.searchForm)
      }
    },
    created() {
      let t = this
      t.getOrderTable(t.feeds.current_page)
    },
    methods: {
      getOrderTable(to_page) {
        let t = this
        t.tableLoading = true
        t.feeds.current_page = to_page
        getTableData(to_page, t.feeds.per_page, t.searchForm).then(res => {
          t.feeds.data = res.data
          t.feeds.total = res.meta.total
          t.tableLoading = false
        }, function (error) {
          t.tableLoading = false
        })

      },
      handleOnPageChange: function (to_page) {
        this.getOrderTable(to_page)
      },
      onPageSizeChange: function (per_page) {
        this.feeds.per_page = per_page
        this.getOrderTable(this.feeds.current_page)
      },
      handleDateChange(val) {
        this.searchForm.pay_at = val
      },

      // 重置
      reset() {
        let t = this
        t.searchForm = {
          order_by: 'id,desc',
          pay_at: [],
          type: '',
          status: ''
        },
          t.getOrderTable()
      }
    },
  }
</script>
